// 在webpack 4.X和5.X中，默认约定
// 默认打包入口为src->index.js
// 默认输出文件路径为dist->main.js
// 可以在webpack.config.js中修改打包的默认约定
// 通过entry节点指定打包入口
// 通过output节点指定打包出口
const path = require('path')

// 1.导入插件html-webpack-plugin
const HtmlPlugin = require('html-webpack-plugin')
// // 2.new构造函数，创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
  // 指定要复制的页面
  template: './src/index.html',
  // 指定复制出来的文件名和存放路径
  filename: './index.html'
})

module.exports = {
  // 代表webpack的运行模式，可选值有两个，development和production
  mode: 'development',     //体积大，打包时间短，适合开发阶段
  // mode: 'production',      // 被压缩,打包时间长，适合发布上线阶段
  // devtool: 'eval-source-map',    //配置sourcemap，让生成文件的与源代码的行数保持一致
  devtool: 'nosources-source-map',    //可以知晓源码错误位置且不会暴露源码，在实际发布的时候，建议设置为 devtool: nosources-source-map 或直接关闭SourceMap, devtool: none
  entry: path.join(__dirname, './src/index.js'),// __dirname:当前模块的目录名
  output:{
    path:path.join(__dirname,'./dist'),// 输出文件的存放路径
    filename:'js/bundle.js'// 输出文件的名称
  },
  // 插件的数组，将来webpack在运行时，会加载并调用这些插件
  plugins:[htmlPlugin],
  devServer:{
    // 首次打包成功后自动打开网页
    open: true,
    // 在http中如果端口号是80，则可以被省略
    port: 90,
    // 指定运行的主机地址
    host: '127.0.0.1'
  },
  module:{
    // test 表示的是匹配的文件类型，use 表示要调用的loader
    // 定义不同模块对应的loader
    rules: [
      {test:/\.css$/,use:['style-loader','css-loader']}
    ]
  }
}

